/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-21 14:06:05
 * @LastEditTime: 2021-04-26 19:34:09
 * @LastEditors: 邢
 */
import React,{useEffect, useState} from 'react';
import styles from './Cooran.less';//样式
import { observer } from 'mobx-react-lite';//仓库，将仓库与页面绑定起来
//获取仓库里面的数据模块
import usestore from '@/context/useStore'
//ts接口
import { Iallbooks, IbookItem } from "@/utils/interface/cooran"
//引入路由插件
import { useHistory,useLocation } from "umi"
//引入制作时间的方法
import { timeAgo } from "@/utils/timemade/time"
//component
import ArticlesTag from '@/component/Articel/articles';
import Category from '@/component/Articel/category';
import { Affix } from 'antd';

function Page() {
  let { cooran } = usestore()
  // let [allbooks,setallbooks] = useState<IbookItem[]>([])
  const history = useHistory()
  const [top, setTop] = useState(10);
  //获取所有书本数据，
  useEffect(()=>{
    console.log(1111)
    cooran.getAllBooks()
  },[])
  return (
    <div className={styles.cooran}>
      <div className={styles.left}>
        {
          cooran.allBooks.length&&cooran.allBooks.map(item=>{
            return <div key={item.id} className={styles.items} onClick={()=>history.push({pathname:`/index/coorandetail/${item.id}`})}>
                <img src={item.cover} alt=""/>
                <div>
                  <p>{item.title}</p>
                  <p>{item.summary}</p>
                  <p>{item.views}次阅读·大约{timeAgo(item.publishAt as string)}前</p>
                </div>
            </div>
          })
        }
      </div>
      <div className={styles.right}>
        <Affix offsetTop={top}>
            <div>
              <Category></Category>
              <ArticlesTag></ArticlesTag>
            </div>
          </Affix>
      </div>
    </div>
  );
}
export default observer(Page)
